<template>
	<div class="aPictureInfo">
		
		<!--地图-->
		<div class="aPicture-map" ref="aPicture-map"></div>
		
		<!--左边信息栏-->
		<div class="left-read" :class="{'left-read-in': isIn}">
			
			<!--头部工具条-->
			<header class="left-read-head">
				<ul class="left-read-utils">
					<li 
						class="left-read-util" 
						@click="leftReadUtilClick('legend')">
						<img src="./img/leftReadLegend.png" /><span>水情图例</span>
					</li>
					<li 
						class="left-read-util"
						@click="leftReadUtilClick('map')">
						<img src="./img/leftReadMap.png" /><span>地图工具</span>
					</li>
					<li 
						class="left-read-util"
						@click="leftReadUtilClick('mode')">
						<img src="./img/leftReadMode.png" /><span>模式切换</span>
					</li>
				</ul>
				<div class="left-read-scale" @click="leftReadScaleClick">
					<Icon :type="scaleIcon"></Icon>
				</div>
			</header>
			
			<!--中间内容-->
			<div class="left-read-content">
				<ul class="left-read-content-titles clear">
					<li 
						class="left-read-content-title pull-left"
						:class="{actived: item.selected}"
						v-for="item in titles"
						@click="leftReadTitleClick(item)">
						<img :src="item.img" class="title-img" />
						<div class="title-name">{{item.name}}</div>
					</li>
				</ul>
				<ul class="left-read-content-details clear">
					<li 
						class="left-read-content-detail pull-left"
						v-for="item in details">
						<checkbox @on-change="leftReadDetailClick(item)" v-model="item.selected">{{item.name}}</checkbox>
					</li>
				</ul>
				<ul class="left-read-content-navs">
					<li 
						class="left-read-content-nav"
						:class="{'actived': navActive === 'timing'}"
						@click="leftReadNavClick('timing')">实时数据</li>
					<li 
						class="left-read-content-nav"
						:class="{'actived': navActive === 'base'}"
						@click="leftReadNavClick('base')">基础数据</li>
					<li 
						class="left-read-content-nav"
						:class="{'actived': navActive === 'command'}"
						@click="leftReadNavClick('command')">三防数据</li>
				</ul>
			</div>
			
			<!--水情图例-->
			<div class="left-read-model" v-show="showLegend">
				<header class="left-read-model-head clear">
					<div class="title pull-left">水情图例</div>
				</header>
				<ul class="left-read-model-lists clear">
					<li 
						class="left-read-model-list pull-left">
						<img src="./img/leftReadLegendYellow.png"/>
						<span class="content">涨</span>
					</li>
					<li 
						class="left-read-model-list pull-left">
						<img src="./img/leftReadLegendBlue.png"/>
						<span class="content">平</span>
					</li>
					<li 
						class="left-read-model-list pull-left">
						<img src="./img/leftReadLegendGreen.png"/>
						<span class="content">落</span>
					</li>
					<li 
						class="left-read-model-list pull-left">
						<img src="./img/leftReadLegendBluew.png"/>
						<span class="content">正常</span>
					</li>
					<li 
						class="left-read-model-list pull-left">
						<img src="./img/leftReadLegendRed.png"/>
						<span class="content">预警</span>
					</li>
				</ul>
			</div>
			
			<!--地图工具-->
			<div class="left-read-model" v-show="showMapUtil">
				<header class="left-read-model-head clear">
					<div class="title pull-left">地图工具</div>
				</header>
				<div class="left-read-model-mapUtil">
					<Radio-group v-model="mapUtil" @on-change="leftReadMapUtilClick">
				        <Radio label="pointer">
				            <span>点</span>
				        </Radio>
				        <Radio label="circular">
				            <span>圆</span>
				        </Radio>
				        <Radio label="rectangle">
				            <span>矩形</span>
				        </Radio>
				    </Radio-group>
				    <div class="clearMapUtil" @click="leftReadMapUtilClear">
				    	<Icon type="trash-a"></Icon>
				    	<span>清除</span>
				    </div>
				</div>
			</div>
		</div>
		
		<!-- 实时数据 -->
		<!--台风、云图、雷达-->
		<typhoon-model ref="typhoon-model"></typhoon-model>
		
		<!--水库-->
		<reservoir-model ref="reservoir-model"></reservoir-model>
		
		<!--水闸-->
		<gate-model ref="gate-model"></gate-model>
		
		<!--泵站-->
		<pump-model ref="pump-model"></pump-model>
		
		<!--内涝点-->
		<waterlogging-model ref="waterlogging-model"></waterlogging-model>
		
		<!--水位站-->
		<waterLevel-model ref="waterLevel-model"></waterLevel-model>
		
		<!--潮位站-->
		<tideGauge-model ref="tideGauge-model"></tideGauge-model>

		<!-- 基础数据 -->
		<!-- 水网 -->
		<singleWaterNet-model ref="singleWaterNet-model"></singleWaterNet-model>

		<!-- 排水口 -->
		<drainPort-model ref="drainPort-model"></drainPort-model>

		<!-- 构建筑物 -->
		<building-model ref="building-model"></building-model>
		
		<!-- 堤围 -->
		<banks-model ref="banks-model"></banks-model>	

		<!-- 险段 -->
		<criticals-model ref="criticals-model"></criticals-model>
		
		<!-- 涵闸 -->
		<waterGate-model ref="waterGate-model"></waterGate-model>

		<!-- 排灌站 -->
		<drainStation-model ref="drainStation-model"></drainStation-model>	

		<!-- 水文站 -->
		<hydrology-model ref="hydrology-model"></hydrology-model>

		<!-- 水浸黑点 -->
		<blackPoint-model ref="blackPoint-model"></blackPoint-model>	

		<!-- 供水管网 -->
		<supplyPipe-model ref="supplyPipe-model"></supplyPipe-model>

		<!-- 自来水厂 -->
		<waterFactory-model ref="waterFactory-model"></waterFactory-model>

		<!-- 供水设施 -->
		<supplyDevice-model ref="supplyDevice-model"></supplyDevice-model>

		<!-- 排水管 -->
		<drainPipe-model ref="drainPipe-model"></drainPipe-model>

		<!-- 污水厂 -->
		<dirtyFactory-model ref="dirtyFactory-model"></dirtyFactory-model>

		<!-- 排水设施 -->
		<drainDevice-model ref="drainDevice-model"></drainDevice-model>

		<!-- 村居 -->
		<rusticate-model ref="rusticate-model"></rusticate-model>
		
		<!-- 地质灾害 -->
		<hazard-model ref="hazard-model"></hazard-model>
		
		<!-- 医院 -->
		<hospital-model ref="hospital-model"></hospital-model>
		
		<!-- 学校 -->
		<school-model ref="school-model"></school-model>
		
		<!-- 银行 -->
		<bank-model ref="bank-model"></bank-model>
		
		<!-- 客运站 -->
		<busStation-model ref="busStation-model"></busStation-model>
		
		<!-- 商场 -->
		<shop-model ref="shop-model"></shop-model>
		
		<!-- 三防实时监控 -->
		<commandVideo-model ref="commandVideo-model"></commandVideo-model>
		
		<!-- 抢险队 -->
		<emergencySquad-model ref="emergencySquad-model"></emergencySquad-model>
		
		<!-- 救援队 -->
		<rescueTeam-model ref="rescueTeam-model"></rescueTeam-model>
		
		<!-- 重点人员实时位置 -->
		<liabilityPerson-model ref="liabilityPerson-model"></liabilityPerson-model>
		
		<!-- 三防专家实时位置 -->
		<defenseExpert-model ref="defenseExpert-model"></defenseExpert-model>
		
		<!-- 物资仓库 -->
		<emergency-model ref="emergency-model"></emergency-model>

		<!-- 避难所 -->
		<refuge-model ref="refuge-model"></refuge-model>

		<loading v-show="showLoading"></loading>
	</div>
</template>

<script>
	// 实时数据
	import typhoonModel from './realData/typhoonModel.vue'
import reservoirModel from './realData/reservoirModel.vue'
import gateModel from './realData/gateModel.vue'
import pumpModel from './realData/pumpModel.vue'
import waterloggingModel from './realData/waterloggingModel.vue'
import waterLevelModel from './realData/waterLevelModel.vue'
import tideGaugeModel from './realData/tideGaugeModel.vue'
// 基础数据
import singleWaterNetModel from './baseData/singleWaterNetModel.vue'
import drainPortModel from './baseData/drainPortModel.vue'
import buildingModel from './baseData/buildingModel.vue'
import banksModel from './baseData/banksModel.vue'
import criticalsModel from './baseData/criticalsModel.vue'
import waterGateModel from './baseData/waterGateModel.vue'
import drainStationModel from './baseData/drainStationModel.vue'
import hydrologyModel from './baseData/hydrologyModel.vue'
import hospitalModel from './baseData/hospitalModel.vue'
import schoolModel from './baseData/schoolModel.vue'
import bankModel from './baseData/bankModel.vue'
import busStationModel from './baseData/busStationModel.vue'
import shopModel from './baseData/shopModel.vue'
import blackPointModel from './baseData/blackPointModel.vue'
import supplyPipeModel from './baseData/supplyPipeModel.vue'
import waterFactoryModel from './baseData/waterFactoryModel.vue'
import supplyDeviceModel from './baseData/supplyDeviceModel.vue'
import drainPipeModel from './baseData/drainPipeModel.vue'
import dirtyFactoryModel from './baseData/dirtyFactoryModel.vue'
import drainDeviceModel from './baseData/drainDeviceModel.vue'
import rusticateModel from './baseData/rusticateModel.vue'
import hazardModel from './commandData/hazardModel.vue'
// 三防数据
import commandVideoModel from './commandData/commandVideoModel.vue'
import emergencySquadModel from './commandData/emergencySquadModel.vue'
import rescueTeamModel from './commandData/rescueTeamModel.vue'
import liabilityPersonModel from './commandData/liabilityPersonModel.vue'
import defenseExpertModel from './commandData/defenseExpertModel.vue'
import emergencyModel from './commandData/emergencyModel.vue'
import refugeModel from './commandData/refugeModel.vue'

import { loadingMixin } from 'common/js/mixins'
import { cloneObj, spliceStr, errorNotice, errorMessage } from 'common/js/dom'
import { leftReadDetails } from 'common/js/module'
import { ERR_OK, ERR_CUSTOM } from 'api/config'
 	import { getSingleWaterNet, getWaterNetInfo } from 'api/aPicture'
import { getLayer, createMap } from 'api/map'
import { mapMutations } from 'vuex'

let layers = {}

export default {
		mixins: [loadingMixin],
		computed: {
			scaleIcon () {
				return this.isIn ? 'chevron-right' : 'chevron-left'
		},
			details () {
				let arr = []
			for (let i of this.titles) {
					if (i.selected) {
						arr = i.children
					break
				}
				}
				return arr
		}
		},
		components: {
			// 实时数据
			'typhoon-model': typhoonModel,
			'reservoir-model': reservoirModel,
			'gate-model': gateModel,
			'pump-model': pumpModel,
			'waterlogging-model': waterloggingModel,
			'waterLevel-model': waterLevelModel,
			'tideGauge-model': tideGaugeModel,
			// 基础数据
			'singleWaterNet-model': singleWaterNetModel,
			'drainPort-model': drainPortModel,
			'building-model': buildingModel,
			'banks-model': banksModel,
			'criticals-model': criticalsModel,
			'waterGate-model': waterGateModel,
			'drainStation-model': drainStationModel,
			'hydrology-model': hydrologyModel,
			'hospital-model': hospitalModel,
			'school-model': schoolModel,
			'bank-model': bankModel,
			'busStation-model': busStationModel,
			'shop-model': shopModel,
			'blackPoint-model': blackPointModel,
			'supplyPipe-model': supplyPipeModel,
			'waterFactory-model': waterFactoryModel,
			'supplyDevice-model': supplyDeviceModel,
			'drainPipe-model': drainPipeModel,
			'dirtyFactory-model': dirtyFactoryModel,
			'drainDevice-model': drainDeviceModel,
			'rusticate-model': rusticateModel,
			'hazard-model': hazardModel,
			// 三防数据
			'commandVideo-model': commandVideoModel,
			'emergencySquad-model': emergencySquadModel,
			'rescueTeam-model': rescueTeamModel,
			'liabilityPerson-model': liabilityPersonModel,
			'defenseExpert-model': defenseExpertModel,
			'emergency-model': emergencyModel,
			'refuge-model': refugeModel
	
		},
		mounted () {
			setTimeout(() => {
				this.initMap()
		}, 20)
		},
		data () {
			return {
				isIn: true,
				titles: cloneObj(leftReadDetails[0]),
				navActive: 'timing',
				showLegend: true,
				showMapUtil: true,
				mapUtil: '',
				showLoading: false
			}
		},
		methods: {
			leftReadMapUtilClear () {
				this.mapUtil = ''
		},
			leftReadMapUtilClick (str) {
	
			},
			leftReadDetailClick (item) {
				if (item.selected) {
					this.addLayer(item)
			} else {
					this.removeLayer(item)
			}
			},
			leftReadTitleClick (item) {
				this.titles.map(item => {
					item.selected = false
			})
			item.selected = true
		},
			leftReadNavClick (str) {
				this.navActive = str
			let arr = []
			switch (str) {
					case 'timing':
						arr = leftReadDetails[0]
					break
				case 'base':
						arr = leftReadDetails[1]
					break
				case 'command':
						arr = leftReadDetails[2]
					break
			}
				this.titles = arr
			if (!this.isIn) {
					return
			}
				this.isIn = false
		},
			leftReadUtilClick (str) {
				switch (str) {
					case 'legend':
						this.showLegend = !this.showLegend
					break
				case 'map':
						this.showMapUtil = !this.showMapUtil
					break
				case 'mode':
	
						break
			}
			},
			leftReadScaleClick () {
				this.isIn = !this.isIn
		},
			showSingleWaterNet (lat, lng) {
				getSingleWaterNet(lat, lng).then(res => {
					if (res.error) {
						errorNotice('获取数据失败')
						return
				}
					if (!res.results.length) {
						return
				};
					let name = res.results[0].attributes.name
				let rings = res.results[0].geometry.rings
	
				// 高亮显示这条河
				let geoJson = {
						type: 'Polygon',
						coordinates: rings
					}
				layers.singleWaterNetLayer.setSource(new ol.source.Vector({
		                features: (new ol.format.GeoJSON()).readFeatures(geoJson, {
		                    dataProjection: 'EPSG:4326',
		                    // 设定JSON数据使用的坐标系

		                    featureProjection: 'EPSG:4326'
		                    // 设定当前地图使用的feature的坐标系
		                })
		            }))
	
	            // 获取该条河的信息
            	this.$refs['singleWaterNet-model'].show()
	            getWaterNetInfo(1, {
		            	rivname: name
//						strivid: "CA638DE8-8838-456D-8A3B-63E5E3A5CACD"
		            }).then(res => {
		            	if (res.code === ERR_OK) {
		            		if (res.result.result.length) {
		            			this.setSingleWaterNetInfo(res.result.result[0])
	            		}
		            	}
		            })
				})
		},
			layerChange (obj) {
				layers.baseLayer.setVisible(obj.base)
			layers.heightLayer.setVisible(obj.height)
			layers.GdPanoramaLayer.setVisible(obj.panorama)
			layers.FsPanoramaLayer.setVisible(obj.panorama)
			layers.FsNhLayer.setVisible(obj.panorama)
		},
			addLayer (item) {
				let layerName = item.layer
			switch (layerName) {
					case 'typhoonLayer': case 'cloudLayer': case 'radarLayer':
						this.$refs['typhoon-model'].show(item)
					break
				case 'waterNetLayer':
						layers.waterNetLayer.setVisible(true)
					layers.singleWaterNetLayer.setVisible(true)
					break
				case 'rainLayer':
					case 'windLayer':
					case 'temperatureLayer':
					case 'roadNetLayer':
					case 'massHeatLayer':
						if (layers[layerName] !== undefined) {
							layers.map.addLayer(layers[layerName])
						return
					}
						layers[layerName] = getLayer(layerName)
					layers.map.addLayer(layers[layerName])
					break
				default:
						if (layers[layerName] !== undefined) {
							layers.map.addLayer(layers[layerName])
						return
					}
						this.showLoading = true
					getLayer(layerName).then(res => {
							if (res.code === ERR_OK && res.layer) {
								layers[layerName] = res.layer
							layers.map.addLayer(res.layer)
						} else if (res.code === ERR_CUSTOM) {
								errorNotice(res.message)
							} else {
								errorMessage('抱歉! 暂时没有该图层信息')
							}
							this.showLoading = false
					})
					break
			}
			},
			removeLayer (item) {
				let layerName = item.layer
			switch (layerName) {
					case 'typhoonLayer': case 'cloudLayer': case 'radarLayer':
						this.$refs['typhoon-model'].hide()
					break
				case 'waterNetLayer':
						layers.waterNetLayer.setVisible(false)
					layers.singleWaterNetLayer.setVisible(false)
					break
				default:
						layers.map.removeLayer(layers[layerName])
					break
			}
			},
			initMap () {
				layers.baseLayer = getLayer('baseLayer')
			layers.heightLayer = getLayer('heightLayer')
			layers.GdPanoramaLayer = getLayer('GdPanoramaLayer')
			layers.FsPanoramaLayer = getLayer('FsPanoramaLayer')
			layers.FsNhLayer = getLayer('FsNhLayer')
			layers.waterNetLayer = getLayer('GDwaterNetLayer')
			layers.singleWaterNetLayer = getLayer('singleWaterNetLayer')
			layers.notionLayer = getLayer('notionLayer')
	
			layers.baseLayer.setVisible(true)
	
			layers.map = createMap(this.$refs['aPicture-map'],
					[layers.baseLayer, layers.heightLayer, layers.GdPanoramaLayer, layers.FsPanoramaLayer, layers.FsNhLayer, layers.waterNetLayer, layers.singleWaterNetLayer, layers.notionLayer])

			layers.map.on('singleclick', (event) => {
					let pixel = event.pixel
				let lat = event.coordinate[0]
				let lng = event.coordinate[1]
				let features = []
				let layerNames = []
	
				layers.map.forEachFeatureAtPixel(pixel, function (feature, layer) {
						features.push(feature)
					if (layer) {
							layerNames.push(layer.get('name') === null ? '' : layer.get('name'))
					}
					})
	
				if (features.length && layerNames[0] !== 'singleWaterNetLayer') {
						let layer = layerNames[0]
					this.$refs[`${spliceStr(0, layer.length - 5, layer)}-model`].show(features[0])
					return
				};

					if (layers.waterNetLayer.getVisible()) {
						this.showSingleWaterNet(lat, lng)
					return
				};
				})
		},
			...mapMutations({
				'setSingleWaterNetInfo': 'SET_SINGLEWATERNETINFO'
			})
		}
	}
</script>

<style scoped lang="scss">
	@import '~common/scss/color';
	
	.aPictureInfo {
		width: 100%;
		height: 100%;
		position: relative;
		.aPicture-map {
			width: 100%;
			height: 100%;
		}
		.left-read {
			width: 320px;
			top: 70px;
			transition: all .4s ease-in-out;
			color: #313131;
			user-select: none;
			position: fixed;
			left: 0;
			.left-read-head {
				width: 100%;
				height: 37px;
				position: relative;
				.left-read-utils {
					display: flex;
					font-size: 12px;
					.left-read-util {
						flex: 1;
						box-sizing: border-box;
						padding: 8px;
						color: #d8e9ff;
						background-color: #008cee;
						border: 1px solid #008cee;
						text-align: center;
						cursor: pointer;
						img {
							width: 12px;
							margin-top: 0px;
							margin-right: 3px;
							vertical-align: middle;
						}
						span {
							display: inline-block;
							vertical-align: middle;
						}
					}
					.left-read-util:hover {
						color: white;
					}
				}
				.left-read-scale {
					width: 37px;
					height: 37px;
					text-align: center;
					line-height: 35px;
					box-sizing: border-box;
					border: 1px solid #e6e5e6;
					background-color: white;
					color: gray;
					position: absolute;
					right: -37px;
					top: 0;
					border-radius: 0 5px 5px 0;
					cursor: pointer;
				}
			}
			.left-read-content {
				width: 100%;
				height: 280px;
				padding: 5px;
				background-color: white;
				border: 1px solid $color-default;
				position: relative;
				user-select: none;
				.left-read-content-titles {
				    border-bottom: 1px solid #ddd;
	 				padding-bottom: 17px;
	 				.left-read-content-title {
	 					width: 25%;
					    text-align: center;
					    font-size: 12px;
					    cursor: pointer;
					    img {
					    	width: 35px;
					    }
	 				}
	 				.left-read-content-title.actived, .left-read-content-title:hover {
	 					color: $color-default;
	 				}
				}
				.left-read-content-details {
					padding-top: 10px;
    				height: 82px;
    				.left-read-content-detail {
    					margin: 8px 10px;
					    cursor: pointer;
					    font-size: 14px;
    				}
				}
				.left-read-content-navs {
				    position: absolute;
				    top: 5px;
    				right: -34px;
					.left-read-content-nav {
						width: 34px;
					    font-size: 12px;
					    padding: 8px 10px;
					    box-sizing: border-box;
					    color: $color-default;
					    border: 1px solid $color-default;
					    background-color: white;
					    border-radius: 0 5px 5px 0;
					    cursor: pointer;
					    margin-top: -1px;
					}
					.left-read-content-nav.actived {
						background-color: $color-default;
   						color: white;
					}
				}
			}
			.left-read-model {
			    width: 100%;
			    background-color: white;
			    padding: 0 30px;
			    margin-top: 10px;
			    border-radius: 0 5px 5px 0;
			    border: 1px solid $color-default;
			    .left-read-model-head {
			    	width: 100%;
				    margin-bottom: 10px;
				    border-bottom: 1px solid #ddd;
				    padding: 10px 0;
				    .title {
				    	padding-right: 20px;
					    font-size: 14px;
					    border-right: 1px solid #ccc;
				    }
			    }
			    .left-read-model-lists {
			    	height: 31px;
				    cursor: default;
				    overflow: hidden;
			    	.left-read-model-list {
			    		width: 20%;
					    font-size: 12px;
					    text-align: center;
					    img {
					    	width: 12px;
    						vertical-align: middle;
					    }
			    	}
			    }
			    .left-read-model-mapUtil {
			    	height: 31px;
				    overflow: hidden;
				    .ivu-radio-wrapper {
				    	margin-right: 28px;
				    }
			    	.clearMapUtil {
			    		font-size: 12px;
			    		display: inline-block;
			    		cursor: pointer;
			    		i {
			    			font-size: 16px;
			    			vertical-align: middle;
			    		}
			    		span {
			    			display: inline-block;
			    			vertical-align: middle;
			    		}
			    	}
			    	.clearMapUtil:hover {
			    		color: $color-default;
			    	}
			    }
			}
		}
		.left-read-in {
			transform: translate3d(-100%, 0, 0);
		} 
	}
</style>